<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>沂水旅游-美食详情-{$store.food_store_name}</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="/static/layuiadmin/layui/css/layui.css">
    <link rel="stylesheet" href="/static/index/css/base.css">
    <link rel="stylesheet" href="/static/index/css/baseDetail.css">
    <link rel="stylesheet" href="/static/index/css/restaurant.css">
    <link rel="stylesheet" href="/static/index/css/my.css">
</head>
<body>

{include file="public/header" model='my' /}


<style type="text/css">

    .store_name {
        font-size: 26px;
        color: #333333;
        font-weight: bold;
    }

    .store-info {
        padding-left: 20px;
        padding-top: 20px;
    }

    .tour_l_img {
        height: 165px;
    }

    .tour-address {
        color: #FFAD6D;
    }

    .food_box {
        margin: 20px 0;
    }

    .one_food {
        width: 100%;
    }

    .one_food_img {
        width: 100%;
        height: 168px;
        border-radius: 10px;
        overflow: hidden;
    }

    .one_food_title {
        text-align: center;
        color: #5C5C5C;
        padding: 10px 0;
    }

    .one_food_img img {
        width: 100%;
        height: 100%;

    }
</style>
<div class="tour-detail">
    <div class="layui-container">
        <div class="tour-detail-box tour-detail-top">

            <div class="layui-row layui-col-space30">

                <div class="layui-col-md3 layui-col-xs12">
                    <div class="layui-row layui-col-space10">
                        <div class="layui-col-md12  layui-col-xs12">
                            <div class="tour_l_img">
                                <img src="{$store['food_store_cover']}" alt="">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-col-md9  layui-col-xs12">


                    <div class="store-info">
                        <div class="store_name">
                            {$store.food_store_name}
                        </div>

                        <div class="tour-tags">
                            {foreach $store.food_tag as $k => $v}
                            <span>{$v}</span>
                            {/foreach}
                        </div>

                        <div class="tour-address">
                            被收藏数：{$collectNum}
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

    <div class="layui-container">

        <div class="layui-row my-order">

            <div class="layui-tab layui-tab-brief" lay-filter="foodStoreTab">
                <ul class="layui-tab-title">
                    <li class="layui-this">美食展示</li>
                    <li>店铺信息</li>
                    <li>店铺相册</li>
                </ul>
                <div class="layui-tab-content">

                    <!--美食展示-->
                    <div class="layui-tab-item layui-show">

                        <div class="show_food_box">

                            <div class="show_food_add">
                                <button type="button" class="layui-btn" id="addFood" style="background: #20E6BA;">添加美食
                                </button>
                            </div>

                            <div class="food_box" >

                                <div class="layui-row layui-col-space30" id="food_box">

                                </div>

                            </div>

                        </div>

                    </div>

                    <!--店铺信息-->
                    <div class="layui-tab-item">

                        <style>
                            .store_info_o{
                                padding: 9px 0;
                                color:#ADADAD;
                            }
                        </style>
                        <div class="store_info">
                            <form action="" class="layui-form">

                                <div class="form-kinds">

                                    <div class="form-kinds-name" style="color: #5C5C5C;font-size: 18px;">
                                       基本信息 <span style="color: #ADADAD;font-size: 14px;">（基本信息如需修改请联系平台客服 0539-2826888)</span>
                                    </div>

                                    <div class="form-info">

                                        <div class="layui-form-item">

                                            <label class="layui-form-label">店铺名称：</label>
                                            <div class="layui-input-block store_info_o">
                                                {$store.food_store_name}
                                            </div>

                                        </div>

                                        <div class="layui-form-item">

                                            <label class="layui-form-label">店铺电话：</label>
                                            <div class="layui-input-block store_info_o">
                                                {$store.food_store_tel}
                                            </div>

                                        </div>

                                        <div class="layui-form-item">

                                            <label class="layui-form-label">店铺地址：</label>
                                            <div class="layui-input-block store_info_o">
                                                {$store.city}{$store.food_store_address}
                                            </div>

                                        </div>

                                        <div class="layui-form-item">

                                            <label class="layui-form-label">入驻时间：</label>
                                            <div class="layui-input-block store_info_o">
                                                {$store.app_time|date='Y-m-d',###}
                                            </div>

                                        </div>

                                    </div>

                                </div>

                                <div class="form-kinds">

                                    <div class="form-kinds-name">
                                        其他信息
                                    </div>
                                    <div class="form-info">
                                        <div class="layui-form-item">

                                            <label class="layui-form-label">人均消费：</label>
                                            <div class="layui-input-block" style="width: 100px">
                                                <input type="text" name="food_people_money" value="{$store['food_people_money']}" required  lay-verify="required" placeholder="￥" autocomplete="off" class="layui-input">
                                            </div>

                                        </div>

                                        <div class="layui-form-item">
                                            <label class="layui-form-label">营业时间：</label>
                                            <div class="layui-input-inline" style="width:200px;">
                                                <input type="text" id="food_store_time" readonly name="food_store_time" value="{$store['food_store_time']}" lay-verify="required" placeholder="开始时间" autocomplete="off" class="layui-input">
                                            </div>
                                        </div>

                                        <div class="layui-form-item">
                                            <label class="layui-form-label">店铺标签</label>
                                            <div class="layui-input-inline" style="width:300px;">
                                                <input type="text" value="{$store['food_tag_ol']}" name="food_tag" lay-verify="required" placeholder="请输入景点标签" autocomplete="off" class="layui-input">
                                            </div>
                                            <label class="layui-form-label" style="width:200px;">多个标签用英文逗号（,）隔开</label>
                                        </div>

                                        <div class="layui-form-item layui-form-text">
                                            <label class="layui-form-label">店铺介绍：</label>
                                            <div class="layui-input-inline" style="width:80%;">
                                                <textarea name="food_store_content" placeholder="请输入内容" style="height:150px;" class="layui-textarea">{$store['food_store_content']}</textarea>
                                            </div>
                                        </div>
                                    </div>

                                </div>

                                <div class="submit-button">

                                    <button class="layui-btn apply-submit" lay-submit lay-filter="editSubmit">保存修改</button>

                                </div>

                            </form>
                        </div>

                    </div>

                    <!--店铺相册-->
                    <div class="layui-tab-item">
                        <style>
                            .store_img_on{
                                width: 100%;
                            }
                            .store_img_on img{
                                width: 100%;
                                height: 188px;
                                cursor: pointer;
                            }
                            .store_img_list{
                                padding: 20px 0;
                            }

                            .add_img{
                                display: flex;
                                justify-content: space-between;
                                align-items: center;
                            }
                            .store_img_num{
                                color: #313131;
                            }
                        </style>
                        <div class="store_img">

                            <div class="add_img">
                                <div class="store_img_num">店铺相册(共<span id="img_num"></span>张图片)</div>
                                <button type="button" class="layui-btn" id="uploadStoreImg" style="background: #20E6BA;">上传图片</button>
                            </div>

                            <div class="store_img_list">

                                <div class="layui-row layui-col-space30" id="store_img_list"></div>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>

<style>
    .addImg {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-bottom: 20px;
    }

    .addImg img {
        width: 100%;
    }
</style>

<div class="addFoodModal layui-form" id="addFoodModal" style="padding:30px;display: none;">

    <form action="" class="layui-form">
        <div class="addImg" id="theUpFoodImg">
            <button type="button" class="layui-btn layui-btn-primary" id="uploadFoodCover">上传图片</button>
        </div>

        <div class="addImg">
            <input type="hidden" id="food_cover" name="food_cover">
            <input type="text" name="food_title" required lay-verify="required" placeholder="请输入美食标题" autocomplete="off"
                   class="layui-input">
        </div>

        <div class="addImg">
            <button lay-submit lay-filter="addFood" class="layui-btn layui-btn-normal" style="background:#20E6BA;">
                确认提交
            </button>
        </div>
    </form>

</div>

{include file="public/footer" /}

<script>
    var element = layui.element;
    var form = layui.form;
    var upload = layui.upload;
    var laydate = layui.laydate;

    form.render();
    element.init();

    getStoreFood();

    $('#addFood').click(function () {

        var addmodal = layer.open({
            title: '上传美食'
            , type: 1
            , shadeClose: true
            , area: ['300px', '500px']
            , content: $('#addFoodModal')
        });

    });

    var loading;
    //普通图片上传
    var uploadInst = upload.render({
        elem: '#uploadFoodCover'
        , url: "{:url('My/uploadFoodCover')}"
        , before: function () {
            loading = layer.load(1, {
                shade: [0.1, '#fff'] //0.1透明度的白色背景
            });
        }
        , done: function (res) {
            if (res.code == 1) {

                layer.close(loading);

                $('#theUpFoodImg').html('');
                var str = '<img src="' + res.path + '" />';
                $('#theUpFoodImg').html(str);

                $('#food_cover').val(res.path);

            } else {
                return layer.msg(res.msg);
            }
        }
    });

    form.on('submit(addFood)', function (data) {

        if (!data.field.food_cover) {

            layer.msg('请上传图片', {icon: 2, time: 1000});

            return false;

        }

        var loading = layer.load(1, {
            shade: [0.1, '#fff'] //0.1透明度的白色背景
        });

        $.ajax({
            url: "{:url('My/addFood')}",
            type: 'post',
            dataType: 'json',
            data: {data: data.field},
            success: function (info) {
                layer.close(loading);
                if (info.code == 1) {
                    layer.closeAll();
                    getStoreFood();
                } else {
                    layer.msg('添加失败', {icon: 2, time: 1000})
                }
            }
        })
        return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
    });

    form.on('submit(editSubmit)', function (data) {

        var loading = layer.load(1, {
            shade: [0.1, '#fff'] //0.1透明度的白色背景
        });

        $.ajax({
            url: "{:url('My/editStoreInfo')}",
            type: 'post',
            dataType: 'json',
            data: {data: data.field},
            success: function (info) {
                layer.close(loading);
                if (info.code == 1) {
                    layer.msg('保存成功', {icon: 1, time: 1000});
                } else {
                    layer.msg('修改失败', {icon: 2, time: 1000})
                }
            }
        })
        return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
    });

    element.on('tab(foodStoreTab)', function(data){

        if (data.index == 2){
            getStoreImgList();
        }

    });

    function getStoreFood(){

        loadings = layer.load(1, {
            shade: [0.1, '#fff'] //0.1透明度的白色背景
        });

        $.ajax({
            url: "{:url('My/getFoodList')}",
            type: 'post',
            dataType: 'json',
            data: {},
            success: function (info) {
                if (info.code == 1) {

                    layer.close(loadings);
                    if (info.data.length>0){
                        var str = '';
                        $.each(info.data,function (i,item) {

                            str += '<div class="layui-col-md3">';
                            str += '<div class="one_food">';
                            str += '<div class="one_food_img">';
                            str += '<img src="'+ item.food_cover +'">';
                            str += '</div>';
                            str += '<div class="one_food_title">'+ item.food_title +'</div>';
                            str += '</div>';
                            str += '</div>';

                        });

                        $('#food_box').html(str);

                    } else {

                        $('#food_box').html(
                            '<div style="width: 100%;height: 300px;text-align: center;line-height: 300px;color: #5c5c5c;">' +
                            '暂无数据' +
                            '</div>'
                        );

                    }

                } else {
                    layer.msg('获取美食列表失败', {icon: 2, time: 1000})
                }
            }
        })

    }

    function getStoreImgList(){
        loadings = layer.load(1, {
            shade: [0.1, '#fff'] //0.1透明度的白色背景
        });

        $.ajax({
            url: "{:url('My/getFoodStoreImgList')}",
            type: 'post',
            dataType: 'json',
            data: {},
            success: function (info) {
                if (info.code == 1) {

                    layer.close(loadings);

                    $('#img_num').html(info.count);

                    if (info.data.length>0){
                        var str = '';
                        $.each(info.data,function (i,item) {

                            str +=  '<div class="layui-col-md4">' +
                                    '<div class="store_img_on" onclick="delImg('+ item.id +')">' +
                                    '<img src="'+ item.img_path +'" alt="">' +
                                    '</div>' +
                                    '</div>';

                        });

                        $('#store_img_list').html(str);

                    } else {

                        $('#store_img_list').html(
                            '<div style="width: 100%;height: 300px;text-align: center;line-height: 300px;color: #5c5c5c;">' +
                            '暂无数据' +
                            '</div>'
                        );

                    }

                } else {
                    layer.msg('获取美食列表失败', {icon: 2, time: 1000});
                }
            }
        })
    }

    function delImg(id){

        var theItem = $(this);
        layer.confirm('确认删除图片吗',function(){

            loadings = layer.load(1, {
                shade: [0.1, '#fff'] //0.1透明度的白色背景
            });

            $.ajax({
                url: "{:url('My/delStoreImage')}",
                type: 'post',
                dataType: 'json',
                data: {id:id},
                success: function (info) {

                    layer.closeAll();
                    
                    if (info.code == 1){

                        var before = $('#img_num').html();

                        $('#img_num').html(before*1-1);
                        theItem.parent().remove();

                    }else{

                        layer.msg('删除失败',{time:1000});

                    }
                }
            });

        });

    }

    //普通图片上传
    var uploadStoreImg = upload.render({
          elem: '#uploadStoreImg'
        , url: "{:url('My/uploadStoreImg')}"
        , multiple:true
        , before: function () {
            loadingss = layer.load(1, {
                shade: [0.1, '#fff'] //0.1透明度的白色背景
            });
        }
        , done: function (res) {
            if (res.code == 1) {

                layer.closeAll();
                var str = '<div class="layui-col-md4">' +
                    '<div class="store_img_on" onclick="delImg('+ res.id +')">' +
                    '<img src="'+ res.path +'" alt="">' +
                    '</div>' +
                    '</div>';

                var theCount = $('#img_num').html();

                $('#img_num').html(theCount*1+1);
                $('#store_img_list').prepend(str);

            } else {
                return layer.msg(res.msg);
            }
        }
    });

    //时间范围选择
    laydate.render({
        elem: '#food_store_time'
        ,type: 'time'
        ,format: 'HH:mm' //可任意组合
        ,range: true //或 range: '~' 来自定义分割字符
    });

</script>
</body>
</html>